<template>
	<div class="app-container">
		<el-form ref="queryForm" class="array" :model="queryParams" label-width="100px">
			<el-form-item label="用户ID：" prop="userID">
				<el-input v-model.trim="queryParams.userID" class="userID" placeholder="请输入用户ID" maxlength="6" />
			</el-form-item>
			<el-form-item label="用户昵称：" prop="userSNickname">
				<el-input v-model.trim="queryParams.userSNickname" class="userSNickname" placeholder="请输入用户昵称" />
			</el-form-item>
			<el-form-item label="手机号：" prop="phoneNumber">
				<el-input v-model.trim="queryParams.phoneNumber" class="phoneNumber" placeholder="请输入手机号码" maxlength="11" />
			</el-form-item>

			<div style="margin-left: 100px">
				<el-button type="primary">搜索</el-button>
			</div>
		</el-form>

		<div class="app-container separate">
			<div>
				<el-button type="info">分销设置</el-button>
				<el-button type="info">分销树图</el-button>
			</div>

			<div class="alignment">
				--
				<div class="box_text">仅新用户首笔订单享受分佣</div>
				<el-switch v-model.trim="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
			</div>
		</div>

		<el-table v-loading="loading" stripe :data="orderList" @selection-change="handleSelectionChange">
			<el-table-column :formatter="emptyToString" type="selection" width="55" align="center" />

			<el-table-column :formatter="emptyToString" type="index" label="编号" prop="number"></el-table-column>
			<el-table-column :formatter="emptyToString" label="用户ID" align="center" prop="userID" />
			<el-table-column :formatter="emptyToString" label="用户昵称" align="center" prop="userSNickname" />
			<el-table-column :formatter="emptyToString" label="用户手机" align="center" prop="userPhone" />
			<el-table-column :formatter="emptyToString" label="一级推荐人用户ID" align="center" prop="userIDOfTheFirstLevelRecommender" />
			<el-table-column :formatter="emptyToString" label="一级推荐人昵称" align="center" prop="nicknameOfTheFirstLevelRecommender" />
			<el-table-column :formatter="emptyToString" label="二级推荐人用户ID" align="center" prop="userIDOfTheSecondLevelRecommender" />
			<el-table-column :formatter="emptyToString" label="二级推荐人昵称" align="center" prop="nicknameOfTheSecondLevelRecommender" />
			<el-table-column :formatter="emptyToString" label="三级推荐人用户ID" align="center" prop="thirdLevelRecommenderUserID" />
			<el-table-column :formatter="emptyToString" label="三级推荐人昵称" align="center" prop="comments" />
			<el-table-column :formatter="emptyToString" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-hasPermi="['mall:order:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑上级</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
export default {
	name: 'Index',
	data() {
		return {
			value: true,
			queryParams: {
				userID: null,
				userSNickname: null,
				phoneNumber: null,
			},
		};
	},
	methods: {},
};
</script>

<style scoped>
.userID {
	width: 100px;
}
.userSNickname {
	width: 100px;
}
.phoneNumber {
	width: 200px;
}
.array {
	display: flex;
}
.separate {
	display: flex;
	justify-content: space-between;
}
.alignment {
	width: 250px;
	display: flex;
	align-content: center;
	justify-content: space-between;
}
.box_text {
	font-weight: bold;
}
</style>
